<template>
  <div class="faq_box">
    <div class="faq_header">
      <i class="el-icon-arrow-left" @click="faq"></i>
      <span>常见问题</span>
    </div>
    <div class="faq_content">
      <el-tabs :tab-position="tabPosition" style="height: 200px;">
        <el-tab-pane label="①"
          ><img src="@/assets/yjpic/faq01.jpg" alt=""
        /></el-tab-pane>
        <el-tab-pane label="②"
          ><img src="@/assets/yjpic/faq02.jpg" alt=""
        /></el-tab-pane>
        <el-tab-pane label="③"
          ><img src="@/assets/yjpic/faq03.jpg" alt=""
        /></el-tab-pane>
        <el-tab-pane label="④"
          ><img src="@/assets/yjpic/faq04.jpg" alt=""
        /></el-tab-pane>
        <el-tab-pane label="⑤"
          ><img src="@/assets/yjpic/faq05.jpg" alt=""
        /></el-tab-pane>
        <el-tab-pane label="⑥"
          ><img src="@/assets/yjpic/faq06.jpg" alt=""
        /><router-link tag="div" to="/index/fans" class=" "><div class="button"><el-button type="success" round size="medium">兑换</el-button></div></router-link></el-tab-pane>
        <el-tab-pane label="⑦"
          ><img src="@/assets/yjpic/faq07.jpg" alt=""
        /></el-tab-pane>
        <el-tab-pane label="⑧"
          ><img src="@/assets/yjpic/faq08.jpg" alt=""
        /></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tabPosition: "left",
    };
  },
  methods: {
    faq() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.faq_box {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  height: 100vh;
  .faq_header {
    background-color: #ffffff;
    display: flex;
    position: fixed;
    width: 100%;
    z-index: 9;
    padding: 25px;
    align-items: center;
    border-bottom: 2px solid rgba(207, 202, 197, 0.959);
    i {
      font-size: xx-large;
    }
    span {
      font-size: 36px;
      display: block;
      width: 100%;
      text-align: center;
    }
  }
  .faq_content {
    display: flex;
    height: 100%;
    margin-top: 13.5%;
    /deep/.el-tabs {
    height: 100% !important;
}

/deep/.el-tabs--left .el-tabs__header.is-left {
    margin-left: 0 !important;
}

/deep/.el-tabs--left .el-tabs__active-bar.is-left {
    width: 0.06rem !important;
    height: 12.5% !important;
}

/deep/.el-tabs__nav {
    height: 100% !important;
}

/deep/.el-tabs__item {
    line-height: normal !important;
    height: 12.5% !important;
    font-size: 1rem !important;
}

/deep/.el-tabs__content {
    height: 100% !important;
}

/deep/.el-tabs__content img {
    height: 100% !important;
    width: 100% !important;
}

/deep/.el-tab-pane {
    height: 100% !important;
}

/deep/.el-button {
    height: 1rem !important;
    width: 2rem !important;
}
    .button{
        display: flex;
        position: absolute;
        top: 55%;
        left: 38%;
    }
  }
}
</style>
